<template>
    <div class="serch">
        <div class="serch-main">
                <h2 class="title-items">搜索</h2>
                <Input :icon="serchValue ? 'ios-search' : '' " v-model="serchValue" 
                placeholder="搜索音乐" 
                size="large"
                @on-change = "serchSonging" 
                @on-enter = "confirmSerch"
                @on-search = "confirmSerch"
                />
                <div class="is-serch" v-if="isInputSerching">
                <h2 class="title-items">单曲</h2>
                <div class="serch-history">
                        <div class="serch-song" v-for="(item,index) in serchAssociation.songlist" :key="index">
                            <span class="hiddenLine" @click="sendSerchKeyWord(item.songname,'songname')">{{item.songname}} &emsp;--&emsp; 

                            <span class="hiddenLine" v-for="itemCild in item.singer" :key="itemCild.id" @click="sendSerchKeyWord(itemCild.name,'singerName')">{{itemCild.name}}&emsp;</span>
                            </span>
                        </div>
                    </div>

                <h2 class="title-items">歌手</h2>
                <div class="serch-history">
                        <div class="serch-song" v-for="(item,index) in serchAssociation.singerList" :key="index">
                           <span class="hiddenLine"><span @click="sendSerchKeyWord(item.singerName,'singerName')" >{{item.singerName}}</span></span>

                        </div>
                </div>

                <h2 class="title-items">专辑</h2>
                <div class="serch-history">
                    <div class="serch-song" v-for="(item,index) in serchAssociation.bumnameList" :key="index">
                           <span class="hiddenLine"  @click="sendSerchKeyWord(item.albumName,'albumName')">{{item.albumName}}</span>
                        </div>
                </div>
                </div>
                <div class="is-serch" v-else>
                    <h2 class="title-items history"><span>历史搜索</span> <span class="clear" @click="clearHistoryList">清空</span></h2>
                    <div class="serch-history">
                        <Button type="text" class="serch-history-item"
                            v-for="(item,index) in historyList" :key="index"
                            @click="sendSerchKeyWord(item)"
                        >{{item}}</Button>
                        <span v-if="historyList.length == 0">开始你的音乐之旅吧...</span>
                    </div>
                    <h2 class="title-items">每日推荐</h2>
                    <div class="serch-history">
                        <div class="serch-hot" v-for="(item,index) in dayilyList" :key="index">
                            <span class="song-name"  @click="sendSerchKeyWord(item.songname,'songname')">{{item.songname}}</span>
                            <span class="song-author" ><span v-for="itemCild in item.singer" :key="itemCild.id" @click="sendSerchKeyWord(itemCild.name,'singerName')" >{{itemCild.name}}&emsp;</span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
import musicApi from "@/Apis/musicApis";
let arr = []
export default {
    data() {
        return {
            isInputSerching:false,
            serchValue:"",  //搜索关键字
            historyList:[], //历史搜索
            dayilyList:[],  //每日推荐

            serchAssociation:{
                songlist:[],
                singerList:[],
                bumnameList:[]
            },//搜索联想信息 
        }
    },
    methods: {
        //输入框搜索音乐
        serchSonging(){
            if(this.serchValue=='' || this.serchValue == undefined) {
                this.isInputSerching = false
                return
            }
            else {
                this.isInputSerching = true
                this.getSerchSong()
                this.getSerchSongalBumname()
                this.getSerchSongalSinger()
            }
        },
        //输入框回车事件
        confirmSerch(){
            console.log(123);
            arr.unshift(this.serchValue)
            if(arr.length > 5) arr.pop()
            JSON.stringify(arr)
            console.log(arr);
            localStorage.historyList = JSON.stringify(arr)
            if(arr.length > 0)this.historyList = JSON.parse(localStorage.historyList)
            this.sendSerchKeyWord(this.serchValue)
        },
        // 每日推荐
        getDailyApi(){
            musicApi
            .dailyApi({}).then(res=>{
                res.data.data.songlist.map(value =>{
                    this.dayilyList.push(value)
                    if(this.dayilyList.length>16)
                    this.dayilyList.pop()
                })
                // if(res.data.data.songlist.length > 16) res.data.data.songlist.pop()
                // this.dayilyList = res.data.data.songlist
                console.log(res.data.data.songlist);
            })
        },
        //清空历史记录
        clearHistoryList(){
            arr = []
            this.historyList = []
            localStorage.historyList = ''
        },
        //搜索歌曲
        getSerchSong() {
            musicApi
                .searchMusic({
                    key: this.serchValue,
                    pageSize:4
                }).then(res => {
                    this.serchAssociation.songlist = res.data.data.list
                    console.log(res.data.data.list);
                })
        },
        //关键词获取专辑
        getSerchSongalBumname() {
            musicApi
                .searchMusic({
                    key: this.serchValue,
                    pageSize:4,
                    t:8
                }).then(res => {
                    this.serchAssociation.bumnameList = res.data.data.list
                    console.log(res.data.data.list,'专辑');
                })
        },
        //关键词获取歌手
        getSerchSongalSinger() {
            musicApi
                .searchMusic({
                    key: this.serchValue,
                    pageSize:4,
                    t:9
                }).then(res => {
                    this.serchAssociation.singerList = res.data.data.list
                    console.log(res.data.data.list,'歌手');
                })
        },
        //关键字传值到列表页面
        sendSerchKeyWord(v,v2){
            console.log(v,v2,123);
            this.$router.push({name:"musicList",params:{keyword:v}})
        },

    },
    created() {
       if(localStorage.historyList == '' || localStorage.historyList == undefined)
       console.log('在无数据');
       else{
           this.historyList = JSON.parse(localStorage.historyList)
           arr = JSON.parse(localStorage.historyList)
       }
       this.getDailyApi()
    },
}
</script>

<style scoped>
.serch{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.serch-main{
    width: 70%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}
.is-serch{
    width: 100%;
}
.title-items{
    width: 100%;
    margin: 30px 0;
    font-size: 28px;
    font-weight: bold;
}
.serch-history{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.serch-history-item{
    margin-right: 20px;
}
.serch-hot{
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
}
.serch-song{
    width: 25%;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
}
.serch-song:hover{
    background: #eee;
    color: rgb(93, 142, 187);
}
.serch-hot:hover{
    background: #eee;
    color: rgb(93, 142, 187);
}
.song-name{
    flex: 1;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.hiddenLine{
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.song-author{
    width: 40%;
    text-align: right;
    overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.history{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.clear{
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
</style>